<template>
	<view style="height: 100%;">
		<view class="user-item">
			<view class="public-user" @click="handleSwitch">
				<view class="icon-switch">
					<view class="item-icon ">
						<image src="../../static/icon/icon-7.png" mode=""></image>
					</view>
				</view>
				<view class="switch-title">切换账号</view>
			</view>
			<view class="public-user" @click="handleExit">
				<view class="icon-exit">
					<view class="item-icon ">
						<image src="../../static/icon/icon-8.png" mode=""></image>
					</view>
				</view>
				<view class="exit-title">退出登录</view>
			</view>

		</view>
		<!-- 退出账号 -->
		<view class="user-modal">
			<uv-modal ref="userExit" title="退出" content='是否退出当前账号？' @confirm="confirm" :show-cancel-button="true"
				class="current-user-modal"></uv-modal>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	// defineOptions({
	// 	name: "userInfo"
	// });

	// 退出登录

	const emitPublic = defineEmits(['Exit-user', 'Switch-user'])
	const userExit = ref(null)
	const handleExit = () => {
		userExit.value.open('')
	}

	const confirm = () => {
		emitPublic('Exit-user', 'Exit-user')
	}


	// 切换账号 
	// const emitSwitch = defineEmits(['Switch-user'])
	const handleSwitch = () => {
		emitPublic('Switch-user', 'Switch')
	}
</script>

<style lang="scss" scoped>
	.user-item {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.public-user:hover {
			transition: all 0.3s ease;
			transform: translateY(-5px);
		}

		.public-user {
			display: flex;
			align-items: center;
			flex-direction: column;
			gap: 0.52vw;
			transition: all 0.3s ease;
			transform: translateY(0);

			.switch-title {
				font-size: var(--text-20);
				color: var(--color-32);
			}

			.exit-title {
				font-size: var(--text-20);
				color: var(--color-f8);
			}

			.icon-exit,
			.icon-switch {
				width: 4vw;
				height: 4vw;
				border-radius: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				.item-icon {
					width: 3vw;
					height: 3vw;

					image {
						width: 100%;
						height: 100%;

					}
				}
			}

			.icon-exit {
				background-color: var(--color-f8);

			}

			.icon-switch {
				background-color: var(--color-32);

			}
		}
	}

	/* 2. 单独设置模态框内容区样式（不受父级百分比影响） */
	::v-deep .user-modal .current-user-modal .uv-popup__content {
		width: 300px !important;
		max-width: 90vw !important;
		height: 150px !important;
		border-radius: 0.4vw;
		background: #fff !important;

	}

	.user-modal {
		width: 10%;
		height: 20%;
	}
</style>